<template>
  <div class="produce-out-create">
    <div class="container">

      <createTop firstMenu="商品管理" secondMenu="商品出库" title="新增出库"></createTop>
      <el-card class="top-card" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <span>待出库清单</span>
        <el-button
        :style="{'marginLeft':'20px'}"
          size="mini"
          plain
          type="success"
          @click="add">新增</el-button>
        </div>
           <div class="produce-out-create-table-wrap">
              <el-table
                :data="tableData"
                style="width: 100%"
                :fit="true"
                :stripe="true"
                size="mini"
                align="center">

                <el-table-column label="操作"
                min-width="140"
                align="center">
                  <template slot-scope="scope">
                    <!-- <el-button
                      size="mini"
                      plain
                      type="primary"
                      v-if="scope.$index===0"
                      @click="add">新增</el-button> -->
                    <el-button
                      size="mini"
                      plain
                      type="danger"
                      @click="del(scope.$index,scope.row)">删除</el-button>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="number"
                  label="商品编号"
                  min-width="100"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="goods_name"
                  label="商品名称"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="class_name"
                  label="商品分类"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="model"
                  label="型号"
                  min-width="120"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="120"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="kucun_count"
                  label="库存数量"
                  min-width="120"
                  align="center">
                </el-table-column>
                
                <el-table-column 
                label="出库数量"
                min-width="180"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.inCount" 
                    placeholder="输入出库数量"></el-input>
                  </template>
                </el-table-column>

                <el-table-column 
                label="备注"
                min-width="180"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.tableRemark" 
                    placeholder="填写备注"></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <deleteConfirm v-if="showMask" @closeDelete="closeDelete" @deleteConfirm="deleteConfirm"></deleteConfirm>
            </div>
      </el-card>

      <el-card shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <span>出库信息</span>
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">制单人</div>
            <el-input :style="{'width':'350px'}" disabled v-model="username" placeholder="读取账号"></el-input>
          </div>

          <div class="se">
            <div class="content-title">出库单号 <span class="red-icon">※</span> </div>
            <el-input :style="{'width':'350px'}" disabled v-model="rukuid" placeholder="自动填充"></el-input>
          </div>
        </div>

        <div class="content">

          <div class="se">
            <div class="content-title">出库日期 <span class="red-icon">※</span></div>
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>

            <div class="content-title">出库类型 </div>
            <el-input :style="{'width':'350px'}" disabled v-model="leixing" placeholder="输入适当的备注方便管理"></el-input>

            <div class="content-title">经办人</div>
            <el-input :style="{'width':'350px'}" v-model="doname" placeholder="输入经办人姓名"></el-input>
          </div>

          <div class="se">
            <div class="content-title">出库备注 </div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
          </div>
        </div>
        <saveBtn @confirm="confirm"></saveBtn>
      </el-card>

        <childTable v-if="showChild" @confirm="addTable" @close="clseChild"></childTable>

    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import childTable from '@/tables/goods/produceOutCreateDetail.vue';
@Component({
  components: {
    createTop,
    saveBtn,
    // tableList,
    childTable
  }
})
export default class ProduceOutCreate extends Vue {
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;

  username: string = '';
  loading: boolean = false;
  info!: object;
  id!: string;
  date: string = '';
  leixing: string = '其他出库';
  doname: string = '';
  rukuid: string = '';
  remark: string = '';
  tableData: any[] = [];

  inCount: string = '';
  tableRemark: string = '';
  showMask: boolean = false;

  showChild: boolean = false;
  mounted() {
    console.log(this.$route.query);
    this.infoRes = new ajaxResquest('/system/account/getinfo');
    this.createRes = new ajaxResquest('/goods/addGoodsOut');
  }
  add(val: any) {
    console.log(val);
    this.showChild = true;
  }
  del(index: number, val: any) {
    // console.log(val);
    console.log(index);
    this.tableData.splice(index, 1);
  }
  clseChild() {
    this.showChild = false;
  }
  addTable(val: any) {
    let temp = val;
    val.map((i: any) => {
      i.inCount = '';
      i.tableRemark = '';
    });
    this.tableData = [...this.tableData, ...temp];
    console.log(this.tableData);

    this.showChild = false;
  }
  confirm(): void {
    if (!this.date) {
      this.$message({
        message: '出库日期不能为空',
        type: 'warning'
      });
      return;
    }
    let isNull = false;
    let temp = this.tableData;
    let sTemp: any = temp.map((i: any) => {
      if (!i.inCount) {
        this.$message.error('有条目入库数量为空!');
        isNull = true;
      }
      if (parseInt(i.inCount) > parseInt(i.kucun_count)) {
        this.$message.error('出库数量超过库存数量!');
        isNull = true;
      }
      return {
        goods_id: i.id,
        number: '-' + i.inCount,
        remarks: i.tableRemark
      };
    });
    let NTemp: string = JSON.stringify(sTemp);
    let data: any = {
      state: '其他出库',
      remarks: this.remark,
      type: 'out',
      date: this.date,
      doName: this.doname,
      goodsInfo: NTemp
    };
    if (isNull) {
      return;
    }
    this.createRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.$to('produceOut')
      }
    });
  }
}
</script>
<style lang="less">
.produce-out-create {
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow-y: auto;
  .top-card {
    box-sizing: border-box;
    margin-bottom: 15px;
  }
  .el-card {
    overflow-y: auto;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .card-title {
    text-align: left;
    font-weight: 600;
  }
  .confirm {
    margin-top: 0;
  }
}
</style>
